<template>
	<view>
		<u-slider v-model="val" @change="sliderChange" :disabled="disabled || !writable" :step="step" :min="min" :max="max" :showValue="true"></u-slider>
	</view>
</template>

<script>
export default {
	data() {
		return {
			val: 1,
			validator: false
		};
	},
	props: {
		value: {
			type: Number,
			default: ''
		},
		disabled: {
			type: Boolean,
			default: false
		},
		writable: {
			type: Boolean,
			default: true
		},
		max: {
			type: Number,
			default: 10
		},
		min: {
			type: Number,
			default: 10
		},
		step: {
			type: Number,
			default: 1
		}
	},
	watch: {
		value: {
			handler () {
				this.val = this.value || ''
			},
			immediate: true,
			deep: true
		}
	},
	methods: {
		// change
		sliderChange(e) {
			this.$emit('input', e)
		}
	}
}
</script>